<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
		<style>
			
		</style>
		<script src="./src/vue.js"></script>
	</head>

	<body>
		<div id="app">
			<button @click.stop="changeMessage">按钮</button>
			<p>{{message}}</p>
			<p>{{list.miaov}}</p>
		</div>
		<script>
			// 计划好的对象
			let vm = new Vue({
				el:'#app',
				data: {
					message:'hello,vue',
					list:{abc:123}  // 没有计划好的属性不是响应的
				},
				methods: {
					changeMessage(){
						//this.list.miaov = '重新变化了'
						this.$set(this.list,"miaov","变化了")
					}
				}
			});

			document.onclick = function (){
				// 构造函数的静态方法
				//Vue.set(vm.list,'miaov','响应的')
				// 实例上的方法
				//vm.$set(vm.list,'miaov','响应的');
			}


		</script>
	</body>
</html>